import { View, Text, TextInput, StyleSheet, Button, Alert } from "react-native";
import React, { useState } from "react";
import {
    scaleSizeH,
    scaleSizeW,
    setSpText,
    statusBarHeight,
} from "../utils/ScreenUtil";
import { FontAwesome } from "@expo/vector-icons";
import { Zocial } from "@expo/vector-icons";
import TouchButton from "../components/TouchButton";
import { login } from "../services/user";
import { set } from "../utils/Storage";
export default function Login({ navigation }) {
    const selected = "#42BD55";
    const noSelected = "#e2d2d2";
    let [phoneStyle, setPhoneStyle] = useState(noSelected);
    let [pwdStyle, setPwdStyle] = useState(noSelected);
    let [phone, setPhone] = useState("");
    let [pwd, setPwd] = useState("");
    const handleSubmit = async () => {
        console.log(phone, pwd);
        let data = await login({ username: phone, pwd });
        console.log("data", data);
        if (data.token) {
            navigation.navigate("TabNav");
            set("token", data.token);
        } else {
            Alert.alert("错误", "登录失败");
        }
    };
    return (
        <View style={styles.container}>
            <Text
                style={{
                    color: "#42BD55",
                    fontSize: setSpText(70),
                    marginTop: scaleSizeH(50),
                }}
            >
                欢迎来到豆瓣
            </Text>
            <TextInput
                style={[styles.input, { borderBottomColor: phoneStyle }]}
                placeholder="手机号/邮箱"
                onFocus={() => setPhoneStyle(selected)}
                onBlur={() => setPhoneStyle(noSelected)}
                onChangeText={(text) => setPhone(text)}
            ></TextInput>
            <TextInput
                style={[styles.input, { borderBottomColor: pwdStyle }]}
                placeholder="密码"
                secureTextEntry={true}
                onFocus={() => setPwdStyle(selected)}
                onBlur={() => setPwdStyle(noSelected)}
                onChangeText={(text) => setPwd(text)}
            ></TextInput>
            <TouchButton
                buttonStyle={{
                    width: scaleSizeW(700),
                    backgroundColor: "#42BD55",
                }}
                onPress={handleSubmit}
            >
                登录
            </TouchButton>
            <View
                style={{
                    flexDirection: "row",
                }}
            >
                <Text>注册豆瓣</Text>
                <Text
                    style={{
                        marginLeft: scaleSizeW(50),
                        marginRight: scaleSizeW(50),
                    }}
                >
                    |
                </Text>
                <Text>忘记密码</Text>
            </View>
            <View
                style={{
                    flexDirection: "row",
                }}
            >
                <Text>
                    <FontAwesome
                        name="weixin"
                        size={setSpText(20)}
                        color="#9A9A9A"
                    />
                    微信登录
                </Text>
                <Text
                    style={{
                        marginLeft: scaleSizeW(100),
                        marginRight: scaleSizeW(100),
                    }}
                >
                    |
                </Text>
                <Text>
                    <Zocial name="weibo" size={setSpText(20)} color="#9A9A9A" />
                    微博登录
                </Text>
            </View>
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        // marginTop: statusBarHeight,
        alignItems: "center",
    },
    input: {
        borderBottomColor: "#e2e2e2",
        borderBottomWidth: scaleSizeW(2),
        width: scaleSizeW(700),
        padding: scaleSizeW(10),
    },
    btn: {
        width: scaleSizeW(700),
    },
});
